<template>
<div>
 <el-row >
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="会员名" size="small" class="form-control" v-model="like">
            <el-button slot="append" icon="el-icon-search" @click="searchUser"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small"
             @click="handleCreateUser()">添加套餐</el-button>
        </el-col>
      </el-row>
 </el-row>


  <el-table
    :data="searchUser(like).slice((search.currentPage - 1) * pagesize, search.currentPage * pagesize)"
    border
    style="width: 100%">

 <el-table-column
      prop="code"
      label="套餐编码"
      width="120">
    </el-table-column>

<!-- <el-table-column prop="" label="评估日期" header-align="center" width="150">
              <template slot-scope="scope">
                  {{scope.row.createtime | dateFormat}}
              </template>
            </el-table-column>
orderDate
 -->


    <el-table-column
      prop="name"
      label="套餐名"
      width="200"
      show-overflow-tooltip>
    </el-table-column>

    <el-table-column
      prop="helpCode"
      label="助记名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="适用性别"
      width="150">
    </el-table-column>
    <el-table-column
      prop="minage"
      label="适用年龄下限"
      width="120">
    </el-table-column>

    <el-table-column
      prop="maxage"
      label="适用年龄上限"
      width="120">
    </el-table-column>
    <el-table-column
      prop="price"
      label="套餐价格"
      width="120">
    </el-table-column>

    <el-table-column
      prop="remark"
      label="套餐介绍"
      width="260"
      show-overflow-tooltip>
    </el-table-column>


    <el-table-column
      label="状态"
      width="260">
    <template slot-scope="scope">
      <el-switch v-model="scope.row.status"
      :active-value="0"
      :inactive-value="1"
      active-text="启用"
      inactive-text="禁用"
      @change="changeSwitch($event,scope.row,scope.$index)">
</el-switch>
  </template>
    </el-table-column>


    <el-table-column
      label="操作"
      width="120">
      <template slot-scope="scope">
        <!-- <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">确认预约</el-button> -->
        <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="search.currentPage"
      :page-sizes="[5, 10, 30, 40]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>


 <!-- 修改弹框 -->
         <el-dialog title="添加套餐" :visible.sync="dialogFormVisible">

  <el-tabs :tab-position="tabPosition" style="height: 550px;margin-top: 50px;">
    <el-tab-pane label="套餐信息">



<el-row :gutter="20">
  <el-col :span="5">*套餐名称:<el-input placeholder="请输入套餐名称" v-model="setmeal.name"/></el-col>
  <el-col :span="5">*助记名:<el-input placeholder="请输入助记名" v-model="setmeal.helpCode"/></el-col>
  <el-col :span="5">*适用性别:<el-input  v-model="setmeal.sex" /></el-col>
  <el-col :span="9"></el-col>
</el-row>
<br/><br/>
<el-row :gutter="20">
  <el-col :span="5">*年龄下限:<el-input placeholder="0" v-model="setmeal.minage"/></el-col>
  <el-col :span="5">*年龄上限:<el-input placeholder="99" v-model="setmeal.maxage"/></el-col>
  <el-col :span="5">*套餐价格:<el-input  v-model="setmeal.price"  /></el-col>
  <el-col :span="9"></el-col>
</el-row>
<br/><br/>
<el-row :gutter="20">
  <el-col >*套餐介绍:<el-input placeholder="请输入套餐介绍" v-model="setmeal.remark"/></el-col>
</el-row>
<br/><br/>
<el-row :gutter="20">
  <el-col >*套餐注意事项:<el-input placeholder="请输入套餐注意事项" v-model="setmeal.attention"/></el-col>
</el-row>
    </el-tab-pane>

    <el-tab-pane label="项目选择">

       <el-transfer
    filterable
    filter-placeholder="请输入搜素内容"
    v-model="value2"
    :titles="['全部全部检查项','已选择项']"
    @change="handleChange"
    :data="transferData">
  </el-transfer>
    </el-tab-pane>
  </el-tabs>

          <div slot="footer"  class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <!-- 设置触发更新的方法 -->
            <el-button type="submit" @click="tjiao">确定</el-button>
          </div>
        </el-dialog>
</div>
</template>

<script>
// import {orders,addorder,updorderstauts} from '@/api/order.js'
import {setmeal,updsetmealstatus,addsetmeal,updsetmeal,checkitemBysetmealId,selectBysetmealId} from '@/api/setmeal.js'
import {checkitems,tsetmealcheckgroup,addtsetmealcheckgroup,addcheckgroupcheckitem,delById,checkitem } from  '@/api/checkitem.js'

export default {
  data(){

    return{

      // setmeal_id:'',
      like:'',
      pagesize:5,
        activeName2: 'first',
        transferData:[],
        value2: [],
        sfz:'',

        tabPosition: 'left',

      tableData:[],

 search: {
        isadd:'',
        sort: "",
        offset: 0,
        limit: 10,
        currentPage: 1
      },

       dialogFormVisible: false,

  setmeal:{

     name:'',

    helpCode:'',

     sex:'',

     maxage:'',

     minage:'',

     price:'',

     remark:'',

     attention:''
      },
        tsetmealcheckgroup:{
              setmeal_id:'',
              checkgroup_id:''
        },
        checkitemIds:[]
    }
  },
  methods:{

  async changeSwitch ($event,row) {
        let [res] =await Promise.all([
           updsetmealstatus(row.id,row.status)
               ])
          this.pageInit();
    },

    searchUser(like){
      // console.log(like)
      return this.tableData.filter((item,i)=>{
            if(item.helpCode.includes(like)){
              return item;
            }
          })
  },

      async pageInit(){

        try{
          let [res] =await Promise.all([
            setmeal()
          ])
        // console.log(res.data)
				this.tableData = res.data;
        }catch(error){
            console.log(error);
        }

     },


     async pageInit2(){
        try{
          let [res] =await Promise.all([
            checkitem()
          ])

				const allData = res.data
				const data = [];
				for(let i = 0; i < allData.length; i++) {
					data.push({
            	key: allData[i].id,
            label: allData[i].name,
          	});
				}
				this.transferData = data;
        }catch(error){
            console.log(error);
        }

     },

    async handleChange(value, direction){
          //  console.log(value, direction);

              let [res] =await Promise.all([
            tsetmealcheckgroup(value[0])
          ])
          // console.log(res.data)
            this.tsetmealcheckgroup.checkgroup_id=res.data


            // console.log(res.data)
      },


    async tjiao() {
      /* console.log(this.value2)
      console.log(this.isadd)
      console.log(this.setmeal) */
      if(this.isadd){
        // console.log(this.setmeal)
        try{
           let [sid] =await Promise.all([
            addsetmeal(this.setmeal)
          ])
          this.tsetmealcheckgroup.setmeal_id=sid.data;
        }catch(error){
            console.log(error);
        }
        // console.log(this.tsetmealcheckgroup.setmeal_id+"***"+this.tsetmealcheckgroup.checkgroup_id)
            this.aa();
      }else{

        let tk=confirm("确认要修改吗？")
        if(tk){

            let [st,del,addcheckgroupcheckitem,sel] =await Promise.all([
            updsetmeal(this.setmeal),
            // selectBysetmealId(this.setmeal.id),
            // delById(sel.data),
          ])

          this.dd(this.tsetmealcheckgroup.checkgroup_id);

          for(let i=0;i<this.value2.length;i++){
          this.checkitemIds[0]=this.value2[i]
            this.cc();
          }
        }
      }

          this.pageInit();
          this.dialogFormVisible = false;
     },

     async cc(){

         let [dd] =await Promise.all([

            addcheckgroupcheckitem(this.tsetmealcheckgroup.checkgroup_id,this.checkitemIds[0])
          ])
     },
     async dd(){

         let [dd] =await Promise.all([

            delById(this.tsetmealcheckgroup.checkgroup_id)
          ])
     },

     async aa(){
       console.log(this.tsetmealcheckgroup)
        let [res] =await Promise.all([
              addtsetmealcheckgroup(this.tsetmealcheckgroup)
          ])
          // console.log(setmeal.data)
     }
     ,
     cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    },



   async handleEdit(index, row) {
     this.value2=[];
     console.log(row.id)
       let [ck] =await Promise.all([
              checkitemBysetmealId(row.id)
          ])

          for(let i=0;i<ck.data.length;i++){
            // console.log(ck.data[i].checkitem_id)
              this.value2.push(ck.data[i].checkitemId)
          }
      // checkitemBysetmealId

                this.isadd=false;
                this.setmeal=row;
                // 设置对话框的可见
                this.dialogFormVisible = true;
          },



    handleSizeChange(val) {
            this.search.limit = val;
             this.search.offset = (this.search.currentPage - 1) * val
              //  this.searchUser()
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.search.currentPage = val
      // this.searchUser()
    },

    //添加套餐
    async handleCreateUser() {
      this.isadd=true;
      this.setmeal={};
      this.dialogFormVisible = true
    },

   /*  handleClick(row) {

        this.dialogFormVisible=true
      } */
  },

  /* filters:{
    dateFormat:function(data){
        var dt=new Date(data)
        var n=dt.getFullYear();
        var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
        var r=(dt.getDate()).toString().padStart(2,"0");
        dt.getHours();
        dt.getMinutes();
        dt.getSeconds();
        return n+"年"+y+"月"+r+"日";
      },
  }, */

  created() {
           this.pageInit();
           this.pageInit2();
          },
}
</script>

<style>
/* .el-row {
    margin-bottom: 20px;

  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .el-header{

    text-align: center;
    line-height: 60px;
  }

  .el-aside {

    text-align: center;
    line-height: 300px;
  }

  .el-main {

    text-align: center;
    line-height: 30px;
  }

  body > .el-container {
    margin-bottom: 20px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  } */
</style>
